<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>swiper轮播合集</title>
		<link rel="stylesheet" type="text/css" href="./css/swiper.css"/>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{margin: 0; padding: 0;}
			 p{text-align: center;}
			 img{ width: 100%;
				 height: 100%;
			}
			 .swiper-container{
				 width: 43.75rem;
				 height: 18.125rem;
				 margin:0 auto;
			 }
			 .swiper-button-next {
			   right: 20px;
			   left: auto;
			 }
			 .swiper-button-prev {
			   left: 20px;
			   right: auto;
			 }

		</style>
	</head>

	<body>
				<div class="swiper-container" id="case1" style="width: 960px;height: 300px;">
				  <div class="swiper-wrapper">
					<div class="swiper-slide"><img src="img/t1.png" ></div>
					<div class="swiper-slide"><img src="img/t2.png" ></div>
					<div class="swiper-slide"><img src="img/t4.png" ></div>
				  </div>
				  <!-- 导航按钮 上一页下一页 -->
				  <div class="swiper-button-prev"></div>
				  <div class="swiper-button-next"></div>
				  <!-- 分页器 -->
				  <div class="swiper-pagination"></div>
				  <!-- 滚动条 -->
				   <div class="swiper-scrollbar"></div>
				</div>

	<script type="text/javascript">
		<!--水平切换  -->
		var mySwiper = new Swiper('#case1', {
			autoplay: true,//可选选项，自动滑动
			initialSlide :1,//默认显示第二张图片索引从0开始
			speed:2000,//设置过度时间
			/* grabCursor: true,//鼠标样式根据浏览器不同而定 */
			 autoplay : {
				delay:3000
			  },                 /*  设置每隔3000毫秒切换 */
			<!-- 分页器 -->
			 pagination: {
				  el: '.swiper-pagination',
				  clickable :true,
				},
			<!-- 导航按钮 上一页下一页 -->
			 navigation: {
				  nextEl: '.swiper-button-next',
				  prevEl: '.swiper-button-prev',
				},
			<!-- 滚动条 -->
			 scrollbar: {
				  el: '.swiper-scrollbar',
				  hide:true,
				},
			/*  设置当鼠标移入图片时是否停止轮播*/
			autoplay: {
				disableOnInteraction: false,
			  },
		});

	</script>
	</body>
</html>
